<template>
	<view v-if="list&&list.length>0" class="cu-card case" :class="props.isCard?'no-card':''">
		<view class="cu-item shadow padding-left padding-right padding-bottom" v-for="(item,index) in list" :key="index" :data-index="index"
			:data-value="item" @click="handleSelect">
			<view class="flex justify-between align-center padding-xs">
				<view>
					<text class="lg text-gray cuIcon-formfill"></text>
					<text class="margin-left-xs text-black text-size-14">{{item.typeName}}</text>
				</view>
				<view class="text-green text-size-16">{{item.weight}}吨</view>
			</view>
			<view class="flex">
				<view class="flex-sub padding-sm text-center">
					<view>{{item.startAddress}}</view>
					<view class="text-size-16">{{item.startTime}}</view>
					<!-- <view class="text-size-16">09:30:28</view> -->
				</view>
				<view class="flex-sub padding-sm text-center">
					<view class="cuIcon-play_forward_fill"></view>
					<view>{{getStatus(item.state)}}</view>
				</view>
				<view class="flex-sub padding-sm text-center">
					<view>{{item.endAddress}}</view>
					<view class="text-size-16">{{item.endTime}}</view>
					<!-- <view class="text-size-16">09:30:28</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	import {
		watch,
		computed,
		ref
	} from "vue";
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		isCard: {
			type: [Boolean, String],
			default: false
		},
		bgImage: {
			type: String,
			default: ''
		},
		list: Array
	})
	const handleSelect = (e:any) => {
		emit('action', e.currentTarget.dataset.value)
	}
	const getStatus = (e:number) => {
		if(e==0){
			return '发布'
		}else if(e==1){
			return '运输中'
		}else{
			return '未知'
		}
	}
</script>

<style>
	.cu-item {
		margin-top: 0;
		border: 1px solid #EFEFEF;
	}
	.cu-card>.cu-item {
	    display: block;
	    background-color: #ffffff;
	    overflow: hidden;
	    border-radius: 10rpx;
	    margin: 0rpx 30rpx 30rpx 30rpx;
	}
</style>
